<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Welcome to Course Builder {{ version }}!</title>
    <style>
        body {
          margin: 0px;
          padding: 0px;
          background-color: #f5f5f5;
        }
        form {
          display: inline;
        }
        html, body, table, td, th {
          font-family: arial,sans-serif;
          font-size: 13px;
        }
        body {
          margin-top: 48px;
        }
        h2 {
          font-size: 2.5em;
          margin-bottom: 0px;
        }
        p {
          font-size: 1.5em;
        }
        a {
          color: black;
          font-weight: bold;
        }
        button {
          display: block;
          margin: 24px auto;
          border: none;
          border-radius: 5px;
          padding: 12px;
          width: 210px;
          color: #FFFFFF;
          text-decoration: none;
          background-color: #4d90fe;
          font-weight: bold;
          cursor:pointer;
        }
        #top {
          padding: 24px;
          background: rgb(255, 153, 0);
          margin: auto;
          width: 600px;
          text-align: center;
        }
        #bottom {
          padding: 24px;
          background-color: rgb(249, 203, 156);
          margin: auto;
          width: 600px;
          text-align: center;
        }
    </style>
    <!-- import jQuery -->
    <script
       src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>
    <script type='text/javascript'>
      $(function() {
        function do_add_first_course(event) {
          $('#action').attr('value', 'add_first_course');
          $('#xsrf_token').attr('value', '{{ add_first_xsrf|js_string }}');
        }
        function do_explore_sample(event) {
          $('#action').attr('value', 'explore_sample');
          $('#xsrf_token').attr('value', '{{ explore_sample_xsrf|js_string }}');
        }
        function do_configure_settings(event) {
          $('#action').attr('value', 'configure_settings');
          $('#xsrf_token').attr('value', '{{ configure_settings_xsrf|js_string }}');
        }

        $('#create_new').click(do_add_first_course).keydown(do_add_first_course);
        $('#explore').click(do_explore_sample).keydown(do_explore_sample);
        $('#configure_settings').click(do_configure_settings).keydown(do_configure_settings);
      });
    </script>
  </head>
  <body>
    <div id="top">
      <h2>Course Builder</h2>
      <p>version {{ version }}</p>
    </div>
    <div id="bottom">
      {% if not course_count %}
      <p>You haven't created a course yet. To <i>create a course</i>,
          click below on one of the buttons.</p>
      {% else %}
        {% if course_count == 1 %}
          <p>You have created <i>your first</i> course. Great start!</p>
        {% else %}
          <p>You have created <i>{{ course_count }} courses</i>. Great job!</p>
        {% endif %}
      {% endif %}
      <p>
        <form action="/admin/welcome" method="POST">
          <input name="action" id="action" value="" type="hidden">
          <input name="xsrf_token" id="xsrf_token" value="" type="hidden">

          {% if not course_count %}
            <button id="create_new" type="submit">Create Empty Course</button>
          {% endif %}
          <button id="explore" type="submit">Explore Sample Course</button>
          <button id="configure_settings" type="submit">Configure Settings</button>
          {% for item in welcome_form_content %}
            {% if item %}{{ item }}{% endif %}
          {% endfor %}
        </form>
      </p>
    </div>
  </body>
</html>
